<!DOCTYPE html>
<html lang="zh">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>页面</title>
    <script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/loading.js"></script>
    <link href="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/theme-chalk/index.css" rel="stylesheet">
    <link rel="stylesheet" href="https://www.kdniao.com/OutDemo/KDNWidget/KDNWidget.css"/>
</head>
<style>
    .box-card {
        width: 400px;
    }

    .icon-list {
        overflow: hidden;
        list-style: none;
        padding: 0;
        border: 0px solid #eaeefb;
        border-radius: 0px;
    }

    .icon-list li span {
        display: inline-block;
        line-height: normal;
        vertical-align: middle;
        font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
        color: #99a9bf;
    }

    .icon-list li {
        float: left;
        width: 21.66%;
        text-align: center;
        height: 120px;
        line-height: 120px;
        color: #666;
        font-size: 13px;
        transition: color .15s linear;
        border-right: 0px solid #eee;
        border-bottom: 0px solid #eee;
        margin-bottom: 5px;
    }

    .icon-list li i {
        display: block;
        font-size: 32px;
        margin-bottom: 15px;
        color: #606266;
    }

    .icon-list li .icon-name {
        display: inline-block;
        padding: 0 3px;
        height: 1em;
        color: #606266;
    }
</style>
<body>
<div id="app">
    <el-container>
    <#--<el-main>-->
        <el-row>
            <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
                <el-card class="box-card" shadow="hover">
                    消息列表
                    <ul class="icon-list">
                        <a href="/message/msgIndex.page">
                            <li><span>
                            <el-badge :value="messageUnReadCount" class="item"><i style="color:red"
                                                                                  class="el-icon-warning"></i><span
                                    class="icon-name">待办事项</span>
                            </el-badge></span></li>
                        </a>
                        <a href="/message/msgIndex.page">
                            <li><span><i class="el-icon-info"></i><span class="icon-name">我的消息</span></span></li>
                        </a>
                    </ul>
                </el-card>
            </el-col>
            <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
                <el-card class="box-card" shadow="hover">
                    金蝶报表
                    <ul class="icon-list">
                        <a href="/message/kInventory.page">
                            <li><span><i class="el-icon-info"></i><span class="icon-name">即时库存</span></span></li>
                        </a>
                    </ul>
                </el-card>
            </el-col>
            <#if reports>
            <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
                <el-card class="box-card" shadow="hover">
                    系统报表
                    <ul class="icon-list">
                <#if order>
                        <a href="/reports/order.page">
                            <li><span><i class="el-icon-document"></i><span class="icon-name">订单报表</span></span></li>
                        </a>
                </#if>
                <#if sku>
                        <a href="/reports/sku.page">
                            <li><span><i class="el-icon-tickets"></i><span class="icon-name">SKU报表</span></span></li>
                        </a>
                </#if>
                <#if spu>
                        <a href="/reports/spu.page">
                            <li><span><i class="el-icon-news"></i><span class="icon-name">已上架产品报表</span></span></li>
                        </a>
                </#if>
                <#if nsl>
                        <a href="/reports/nsl.page">
                            <li><span><i class="el-icon-goods"></i><span class="icon-name">非标库报表</span></span></li>
                        </a>
                </#if>
                    <#--<#if contract>-->
                    <#--<a href="/reports/contract/sku.page">-->
                    <#--<li><span><i class="el-icon-sold-out"></i><span class="icon-name">合同SKU上架报表</span></span>-->
                    <#--</li>-->
                    <#--</a>-->
                    <#--</#if>-->
                    </ul>
                </el-card>
            </el-col>
            </#if>
        </el-row>
    <#--</el-main>-->
    </el-container>
</div>

<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/dist/vue.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/index.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/publiccss/assets/global/plugins/jquery.min.js"
        type="text/javascript"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                messageUnReadCount: '',
            };
        },
        methods: {
            orderReport() {
                this.$alert('正在开发中', '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                        this.$message({
                            type: 'info',
                        });
                    }
                });
            },
            //获取当前登录用户未读消息条数
            getMessageUnReadCount() {
                var count = 0;
                $.ajax({
                    url: '/message/unReadCount.json',
                    type: 'get',
                    async: false,
                    success: function (result) {
                        if (result.ret) {
                            count = result.data;
                        }
                    }
                });
                this.messageUnReadCount = count;
            },
        },
        mounted() {
            this.getMessageUnReadCount();
        },
    })
</script>
</body>

</html>